<script setup lang="ts">
import { Logo } from '@fl/components'
import { genOssUrl, oss } from '@fl/logics/oss'

const sloganImg = genOssUrl(oss.mall.slogan)
const loginImg = genOssUrl(oss.mall.login)

const currentYear = computed(() => new Date().getFullYear())

function goToIcp() {
    window.open('https://beian.miit.gov.cn/', '_blank')
}
</script>

<template>
    <div class="login">
        <div class="header">
            <div class="header-container">
                <div class="logo">
                    <Logo :size="60" />

                    <div class="logo-text-wrap">
                        <div class="logo-text flex flex-col">
                            <div i-custom-anju-calligraphy
                                 class="wz1 text-blac fill-current"
                            />

                            <div i-custom-anju-link
                                 class="wz2 mt-8 fill-current text-black"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="content">
            <div>
                <img :src="sloganImg"
                     class="sloganImg"
                >

                <img :src="loginImg"
                     class="loginImg"
                >
            </div>

            <slot />
        </div>

        <div class="footer">
            <div class="footer-container">
                <div class="footer-content">
                    <div class="footer-left">
                        <div class="company">
                            武汉安居供应链有限公司
                        </div>

                        <div class="network">
                            <span>网络经营许可证</span>

                            <span>©Copyright {{ currentYear }} 安居链 版权所有</span>
                        </div>

                        <div class="icp"
                             @click="goToIcp"
                        >
                            鄂ICP备2023030090号
                        </div>
                    </div>

                    <div class="footer-right">
                        <div class="code1">
                            <div class="img">
                                <img src="https://public-obs-cdn.anjulian.com.cn/2024-06-14/9a7c49af-e179-4ba5-8e78-edaf76aff3d9.jpg"
                                     alt="安居链小程序"
                                >
                            </div>

                            <div class="text">
                                安居链小程序
                            </div>
                        </div>

                        <div class="code2">
                            <div class="img">
                                <img src="https://public-obs-cdn.anjulian.com.cn/2024-06-14/00b86881-7dc5-4001-b204-6676fabdb484.jpg"
                                     alt="安居链公众号"
                                >
                            </div>

                            <div class="text">
                                安居链公众号
                            </div>
                        </div>

                        <div class="code3">
                            <div class="img">
                                <img src="https://public-obs-cdn.anjulian.com.cn/2024-06-14/110e53c2-e302-47bb-a8f3-0a42d16ea012.jpg"
                                     alt="安居链APP"
                                >
                            </div>

                            <div class="text">
                                安居链APP
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@function toVw($px) {
    @return #{calc(#{$px} * 100 / 1920 * 1vw)};
}
@function toVh($px) {
    @return #{calc(#{$px} * 100 / 1080 * 1vh)};
}
.login {
    width: 100%;
    height: 100%;
    background: #fff;
    .header {
        width: 100%;
        height: toVh(120);
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        .header-container {
            width: calc(100% - toVw(160));
            height: 100%;
            display: flex;
            align-items: center;
            .logo {
                display: flex;
                align-items: center;
                .logo-text-wrap {
                    margin-left: toVw(8);
                    .logo-text {
                        .wz1 {
                            width: toVw(100);
                            height: toVh(30);
                        }
                        .wz2 {
                            width: toVw(100);
                            height: toVh(16);
                        }
                    }
                }
            }
        }
    }
    .content {
        width: 100%;
        height: toVh(788);
        background: #f7f8fa;
        overflow: hidden;
        display: flex;
        align-items: center;

        .sloganImg {
            width: toVw(625);
            height: toVh(88);
            margin-left: toVw(284);
            // margin-top: toVh(60);
            margin-bottom: toVh(40);
        }
        .loginImg {
            width: toVw(900);
            height: toVh(554);
            margin-left: toVw(145);
        }
    }
    .footer {
        width: 100%;
        height: toVh(172);
        display: flex;
        justify-content: center;
        align-items: center;
        .footer-container {
            width: calc(100% - toVw(160));
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            .footer-content {
                width: 100%;
                height: calc(100% - toVh(40));
                overflow: hidden;
                display: flex;
                justify-content: space-between;
                .footer-left {
                    height: 100%;
                    overflow: hidden;
                    margin-top: toVh(23);
                    .company {
                        font-size: toVh(16);
                        color: #aaaaaa;
                    }
                    .network {
                        font-size: toVh(14);
                        color: #767676;
                        margin: toVh(5) 0;
                    }
                    .icp {
                        font-size: toVh(14);
                        color: #da0004;
                        cursor: pointer;
                    }
                }
                .footer-right {
                    overflow: hidden;
                    display: flex;
                    .code1 {
                        .img {
                            width: toVw(90);

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .text {
                            font-size: toVh(16);
                            color: #aaaaaa;
                            text-align: center;
                        }
                    }
                    .code2 {
                        margin: 0 toVw(77);
                        .img {
                            width: toVw(90);

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .text {
                            font-size: toVh(16);
                            color: #aaaaaa;
                            text-align: center;
                        }
                    }
                    .code3 {
                        .img {
                            width: toVw(90);

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .text {
                            font-size: toVh(16);
                            color: #aaaaaa;
                            text-align: center;
                        }
                    }
                }
            }
        }
    }
}
</style>
